<template>
  <!-- 对话框(添加 / 修改) -->
  <el-dialog
    :title="title"
    :visible.sync="show"
    width="500px"
    append-to-body
    :before-close="cancel"
    :close-on-click-modal="false"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="学院" prop="collegeId">
        <college-selector v-model="form.collegeId"></college-selector>
      </el-form-item>
      <el-form-item label="系部" prop="departmentId">
        <departments-selector
          v-model="form.departmentId"
          :college-id="form.collegeId"
        ></departments-selector>
      </el-form-item>
      <el-form-item label="关联房间" prop="roomId">
        <college-room-selector
          v-model="form.roomId"
          :department-id="form.departmentId"
        ></college-room-selector>
      </el-form-item>

      <el-form-item label="关联铺位" prop="bedId">
        <college-bed-selector
          v-model="form.bedId"
          :room-id="form.roomId"
        ></college-bed-selector>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
    <el-dialog
      title="学生列表"
      :visible.sync="studentFlag"
      append-to-body
      :close-on-click-modal="false"
    >
      <student-list @handleStudentData="getStudentData"></student-list>
    </el-dialog>
  </el-dialog>
</template>

<script>
import {
  moveIn
} from "@/api/collegebase/accommodationReside";
import studentList from "@/views/collegebase/studentChange/studentList";
import { getAccommodationFloorPage } from "@/api/collegebase/accommodationFloor.js";
import CollegeSelector from "@/components/CollegeSelector";
import DepartmentsSelector from "@/components/DepartmentsSelector";
import CollegeRoomSelector from "@/components/CollegeBase/RoomSelector";
import CollegeBedSelector from "@/components/CollegeBase/BedSelector";

export default {
  name: "AccommodationResideEdit",
  components: {
    CollegeBedSelector,
    CollegeRoomSelector,
    DepartmentsSelector,
    CollegeSelector,
    studentList,
  },
  data() {
    return {
      studentFlag: false,
      bedList: [],
      departmentsList: [],

      roomList: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        resideId: [
          { required: true, message: "入住人不能为空", trigger: "blur" },
        ],
        roomId: [
          { required: true, message: "房间不能为空", trigger: "blur" },
        ],
        role: [
          {
            required: true,
            message: "入住角色（角色+id 联合确立关系）不能为空",
            trigger: "change",
          },
        ],
        bedId: [{ required: true, message: "床铺不能为空", trigger: "blur" }],
      },
    };
  },
  created() {
  },
  props: {
    // 是否显示弹出层
    show: {
      type: Boolean,
      default: false,
    },
    // 显示弹出层标题
    title: {
      type: String,
      default: "",
    },
  },
  watch: {
    "form": {
      handler(form) {
        if (form.buildingId) {
          this.buildChange(form.buildingId);
        }

      },
      deep: true,
    }
  },
  methods: {
    async buildChange(buildingId) {
      const res = await getAccommodationFloorPage({
        buildingId,
        pageNo: 1,
        pageSize: 99,
      });
      this.floorList = res.data.list;
    },
    getStudentData(data) {
      console.log(data);
      this.form.resideId = data.id;
      this.form.resideName = data.studentName;
      this.studentFlag = false;
    },


    /** 初始化编辑的数据**/
    initData(rowData) {
      this.reset();
      if (rowData && rowData.id) {
        this.form = rowData;
        this.form.datetimerange = [this.form.startTime, this.form.endTime];
      }
    },
    /** 取消按钮 */
    cancel() {
      this.$emit("update:show", false);
      this.reset();
    },
    /** 表单重置 */
    reset() {
      this.form = {
        id: undefined,
        resideId: undefined,
        role: undefined,
        resideName: undefined,
        resideRemark: undefined,
        bedId: undefined,
        collegeId: undefined,
        orgId: undefined,
        remark: undefined,
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (!valid) {
          return;
        }
        // 修改的提交
        if (this.form.id != null) {
          moveIn(this.form).then((response) => {
            this.$modal.msgSuccess("操作成功");
            this.cancel();
            this.$emit("success");
          });
          return;
        }
        // 添加的提交
        // createAccommodationReside(this.form).then((response) => {
        //   this.$modal.msgSuccess("新增成功");
        //   this.cancel();
        //   this.$emit("success");
        // });
      });
    },
  },
};
</script>
